<template>
    <view class="load" v-if="!load">
      <u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
    </view>
    <view v-else>
        <view class="navbox">
          <view class="navtitle" v-for="(item, index) in navlist" :key="index" :class="{ 'text4': navindex == index }"
            @click="navswitch(index)">
            {{ item+(index == 0?'('+memberlist.length+')':'('+plelist.length+')') }}

            <view v-if="navindex == index" class="aft4"></view>
          </view>
        </view>
        <block v-if="navindex == 0">
          <block v-if="memberlist.length > 0">
          <view class="memberbox" v-for="(item, index) in memberlist" :key="index"
            @click="nav_to('/pages/user/user_visitor?id=' + item.UserID)">
            <image class="hdimg" mode="aspectFill" :src="item.HeadImgUrl"></image>
            <view class="ringtbox">
              <view class="meinfo">
                <view class="name">{{ item.Name ? $util.entitiesToUtf16(item.Name) : '' }}</view>
                <image v-if="item.UserType != '普通用户'" class="vipicon"
                  src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1716367597061433.png" mode="widthFix"></image>
              </view>
              <view class="addretext">{{ item.UserCity ? item.UserCity : '' }}</view>
            </view>
            <view class="stabox" v-if="item.Status == 2">
              <view class="Agreebtn">已核销</view>
            </view>
          </view>
          </block>
          <block v-else>
            <u-empty mode="list" width="100" height="100"
              icon="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17124806786111367.png" :show="true"
              iconSize="32" text="暂无数据"></u-empty>
          </block>
        </block>
        <block v-if="navindex == 1">
          <block v-if="plelist.length > 0">
          <view class="memberbox" v-for="(item, index) in plelist" :key="index"
          @click="nav_to('/pages/user/user_visitor?id=' + item.UserID)">
            <image class="hdimg" mode="aspectFill" :src="item.HeadImgUrl"></image>
            <view class="ringtbox">
              <view class="meinfo">
                <view class="name">{{ item.Name ? $util.entitiesToUtf16(item.Name) : '' }}</view>
                <image v-if="item.UserType != '普通用户'" class="vipicon"
                  src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1716367597061433.png" mode="widthFix"></image>
              </view>
              <view class="addretext">{{ item.UserCity ? item.UserCity : '' }}</view>
            </view>
          </view>
          </block>
          <block v-else>
            <u-empty mode="list" width="100" height="100"
              icon="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17124806786111367.png" :show="true"
              iconSize="32" text="暂无数据"></u-empty>
          </block>
        </block>
    </view>
</template>

<script>
export default {
components: {},
data() {
return {
    load:false,
    navindex:0,
    hdID:'',
    memberlist:[], // 已核销列表
    plelist:[], //未核销列表
    navlist:['已核销','未核销'],
};
},
onLoad(e){
    this.hdID = e.id
    this.appDetail()
},
methods: {
    //列表切换
    navswitch(index) {
      this.navindex = index
      if (index == 0) {
        this.appDetail()
      } else if (index == 1) {
        this.appDetail()
      } 
    },
    // 获取定位
    getLocationSysc() {
      let _this = this;
      return new Promise((resolve, reject) => {
        uni.getLocation({
          type: "gcj02",
          success: function (res) {
            resolve(res);
          },
          fail: function (err) {
            const defaultLocation = {
              latitude: 0,
              longitude: 0,
            };
            resolve(defaultLocation);
          },
        });
      });
    },
    async appDetail(){
        let loc = await this.getLocationSysc();
        let res = await this.$api.post('Appointment/Detail', {
					ID: this.hdID,
					User_Lng: loc.longitude,
					User_Lat: loc.latitude
				});
        if(res.code == 0){
            let list = [] 
            list = res.data.Item.slice(1)
						console.log('=?>>>>>>',list);
            this.memberlist = list.filter((item,index)=>{
              return item.Status == 2
            })
            this.plelist = list.filter((item,index)=>{
              return item.Status == 1
            })
            this.load = true
        }
    }
},

}
</script>
<style lang='scss'>
.memberbox {
  padding: 24rpx 24rpx 0 24rpx;
  background-color: #fff;
  display: flex;
  // align-items: center;
  position: relative;

  .hdimg {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    // background-color: #706eee;
    margin-right: 24rpx;
  }

  .ringtbox {
    flex: 1;
    border-bottom: 2rpx solid #E4E4E4;
    padding-bottom: 26rpx;

    .meinfo {
      display: flex;
      align-items: center;

      .type {
        width: 60rpx;
        height: 32rpx;
        background: #706EEE;
        border-radius: 4rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 22rpx;
        color: #fff;
      }

      .name {
        font-size: 28rpx;
        font-weight: bold;
        color: #333333;
        // margin: 0 8rpx;
      }

      .vipicon {
        width: 88rpx;
        height: 36rpx;
      }
    }

    .addretext {
      font-size: 24rpx;
      color: #909090;
      margin-top: 12rpx;
    }
  }

  .delbtn {
    width: 40rpx;
    height: 40rpx;
    background: #FC201C;
    border-radius: 50%;
    position: absolute;
    right: 34rpx;
    top: 44rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    .linew {
      width: 24rpx;
      height: 4rpx;
      background: #FCFCFC;
    }
  }

  .stabox {
    display: flex;
    align-items: center;
    border-bottom: 2rpx solid #E4E4E4;
    .Agreebtn {
      width: 120rpx;
      height: 56rpx;
      border-radius: 28rpx;
      border: 1rpx solid #e4e4e4;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24rpx;
      color: #999999;
      margin-right: 20rpx;
    }

    .Refusebtn {
      width: 120rpx;
      height: 56rpx;
      border-radius: 28rpx;
      border: 2rpx solid #E6E6E6;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24rpx;
      color: #333333;
    }
  }
}
.memberbox:last-child .ringtbox{
  border-bottom: 0 !important;
}
.memberbox:last-child .stabox{
  border-bottom: 0 !important;
}
.navbox {
  // width: 704rpx;
  width: 100%;
  height: 116rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 0 auto;
  margin-top: 20rpx;
  background-color: #fefefe;
  border-bottom: 1rpx solid #E4E4E4;

  .navtitle {
    width: calc(100% / 3);
    height: 100%;
    color: #999999;
    font-size: 28rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .text4 {
    color: #333333;
    font-size: 32rpx;
    font-weight: bold;
  }

  .aft4 {
    width: 40rpx;
    height: 8rpx;
    background: #111;
    border-radius: 4rpx;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>